<template>
  <div class="leftNav">
  <!-- logo -->
        <h2 @click="handleWelcome">
          <img v-if="isCollapse" src="@/assets/logo_small.jpg" alt="">
          <img v-if="!isCollapse" src="@/assets/logo.jpg" alt="">
        </h2>
        <!-- c菜单 -->
        <el-menu
        default-active=""
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse-transition= "transition"
        :collapse="isCollapse"
        background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b" >
        <menu-tree v-for="item in mockJSON" :key="item.id" :menu = 'item'></menu-tree>
        </el-menu>
  </div>
</template>

<script>
import menuTree from '@/components/menuTree'
export default {
  name: 'leftNav',
  data () {
    return {
      transition: false
    }
  },
  props: {
    isCollapse: {
      type: Boolean,
      required: true
    },
    mockJSON: {
      type: Array,
      required: true
    }
  },
  components: {
    menuTree: menuTree
  },
  mounted () {
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath);
    },
    handleWelcome () {
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
.lefeNav {
  height: 100%;
}
h2 {
  cursor: pointer;
  width: 200px;
  height: 60px;
  margin-bottom: 5px;
}
h2>image {
  width: 100%;
}

</style>
